<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <title>Title</title>
    <base th:href="@{/}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        /*layui数据表格复选框修正*/
        .layui-table-view .layui-form-checkbox i {
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div style="padding: 10px">
    <blockquote class="layui-elem-quote">
        <form class="layui-form">
            <div class="layui-inline">
                <input type="text" id="name" name="name" placeholder="权限名称" class="layui-input">
            </div>
            <div class="layui-inline">
                <select id="type" name="type">
                    <option value="">权限类型</option>
                    <option value="1">目录</option>
                    <option value="2">菜单</option>
                    <option value="3">按钮</option>
                </select>
            </div>
            <div class="layui-inline">
                <shiro:hasPermission name="permission:query">
                    <a class="layui-btn searchBtn">搜索</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="permission:add">
                    <a class="layui-btn layui-btn-normal addBtn">添加</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="permission:remove">
                    <a class="layui-btn layui-btn-danger removeBtn">批量删除</a>
                </shiro:hasPermission>
            </div>
        </form>
    </blockquote>
    <table id="tab" lay-filter="tab"></table>

    <!--表格中的操作-->
    <script type="text/html" id="permissionBar">
        <shiro:hasPermission name="permission:edit">
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="permission:remove">
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="remove">删除</a>
        </shiro:hasPermission>
    </script>

    <!--表单-->
    <div id="dataWindow" style="display: none;padding: 10px;">
        <form id="dataForm" class="layui-form" lay-filter="dataForm">
            <input type="text" name="id" style="display: none;">
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入权限名称"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="1">目录</option>
                        <option value="2">菜单</option>
                        <option value="3">按钮</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">访问地址</label>
                <div class="layui-input-block">
                    <input type="text" name="url" placeholder="请输入访问地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限代码</label>
                <div class="layui-input-block">
                    <input type="text" name="percode" placeholder="请输入权限代码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">父节点</label>
                <div class="layui-input-block">
                    <!-- 把父节点从输入框该为下拉框：下拉框里面的数据不能写死，必须是动态获取的 -->
                    <!--<input type="text" name="parentId" placeholder="请输入父节点" class="layui-input"/>-->
                    <select id="parentId" name="parentId"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示顺序</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" placeholder="请输入显示顺序" class="layui-input">
                </div>
            </div>
            <button class="submitBtn" lay-submit lay-filter="submitBtn" style="display: none;">立即提交</button>
        </form>
    </div>
</div>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['table', 'form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            dropdown = layui.dropdown,
            tree = layui.tree,
            $ = layui.$;

        //获取前端缓存中的数据
        var userInfo = sessionStorage.getItem('userInfo');
        if(!userInfo){
            location.href = 'page/login';
        }

        //异步表格初始化
        table.render({
            id: 'permissionTable',
            elem: '#tab',
            //异步请求
            method: 'get',
            url: 'permission/findPage',
            //分页
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50],
            //设置表头
            cols: [
                [{type: 'checkbox', width: 50, fixed: 'left'},
                    {field: 'id', title: 'ID', minWidth: 50, fixed: 'left', align: 'center'},
                    {field: 'name', title: '权限名称', minWidth: 100, fixed: 'left', align: 'center'},
                    {
                        field: 'type', title: '权限类型', align: 'center', templet: function (d) {
                            var result = ''
                            switch (d.type) {
                                case '1':
                                    result = '目录';
                                    break;
                                case '2':
                                    result = '菜单';
                                    break;
                                case '3':
                                    result = '按钮';
                                    break;
                            }
                            return result;
                        }
                    },
                    {field: 'url', title: '访问地址', align: 'center'},
                    {field: 'percode', title: '权限代码', align: 'center'},
                    {field: 'parent', title: '父节点', align: 'center', templet:function (d) { // d表示当前行的数据
                            return d.parent.name ? d.parent.name : '无';
                        }},
                    {field: 'sort', title: '显示顺序', align: 'center'},
                    {title: '操作', minWidth: 150, fixed: 'right', align: 'center', templet: '#permissionBar'}]
            ],
            //res 即为后台响应的数据
            parseData: function (res) {
                return {
                    //解析接口状态
                    'code': res.code,
                    //解析提示文本
                    'msg': res.message,
                    //解析数据长度
                    'count': res.data.total,
                    //解析数据列表
                    'data': res.data.list
                };
            },
            request: {
                //页码的参数名称，默认：page
                pageName: 'pageNum',
                //每页数据量的参数名，默认：limit
                limitName: 'pageSize'
            },
            response: {
                //规定成功的状态码，默认：0
                statusCode: 200
            }
        });

        //条件查询
        $('.searchBtn').click(function () {
            tableReload();
        });

        //行工具事件
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(tab)', function (obj) {
            //获得当前行数据
            var data = obj.data;
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;

            if (layEvent == 'edit') {
                // 点击修改按钮的时候不再立刻数据回显，而且动态加载完父节点列表之后，才数据回显
                // form.val("dataForm", data);

                //点击编辑按钮
                addOrEdit(data.id);
            } else if (layEvent == 'remove') {
                //点击删除按钮
                remove(data.id);
            }
        });

        //单条删除函数
        function remove(id) {
            layer.confirm('确定要删除吗?', function () {
                //通过异步请求删除
                $.ajax('permission/remove/' + id, {
                    type: 'delete',
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.message);
                            //表格重载
                            tableReload();
                        }
                    }
                });
            });
        }

        //批量删除函数
        function removeBatch() {
            //获取表格选中数据状态
            var checkStatus = table.checkStatus('permissionTable');
            //获取选中数据
            var checkData = checkStatus.data;
            if (checkData.length == 0) {
                layer.msg('请选择要删除的数据');
            } else {
                layer.confirm('确定要删除吗?', function () {
                    var array = [];
                    checkData.forEach(function (item) {
                        array.push(item.id);
                    });
                    $.ajax('permission/remove?ids=' + array.join(), {
                        type: 'delete',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.message);
                                //表格重载
                                tableReload();
                            }
                        }
                    });
                });
            }
        }

        $('.removeBtn').click(function () {
            removeBatch();
        })

        //新增
        var window_index = -1;

        function addOrEdit(id) {
            layer.open({
                type: 1,
                title: id ? '权限编辑' : '权限新增',
                content: $('#dataWindow'),
                area: ['100%','100%'],
                maxmin: true,
                btn: ['确定', '取消'],
                //点击确定按钮事件
                yes: function (index) {
                    window_index = index
                    $('.submitBtn').click();
                },
                success:function (){
                    // 获取所有可以作为父节点的目录和菜单,动态渲染到新增和修改弹出框的父节点下拉框中
                    $.ajax({
                        url: 'permission/findMenuAndList',
                        type: 'get',
                        success(resp){
                            var str = '<option value="0">请选择</option>';
                            for(var i = 0;i < resp.data.length;i++){
                                str += `<option value="${resp.data[i].id}">${resp.data[i].name}</option>`
                            }
                            $('#parentId').html(str);
                            form.render('select'); //刷新select选择框渲染
                            // 如果是修改操作,则进行数据的回显
                            if(id){
                                // 根据id获取权限的数据
                                $.ajax({
                                    url: 'permission/find/'+id,
                                    type: 'get',
                                    success(resp){
                                        if(resp.code == 200){
                                            form.val("dataForm", resp.data);
                                        }else{
                                            layer.msg(resp.message)
                                        }
                                    }
                                })
                            }

                        }
                    })

                },
                //点击弹出层隐藏之后事件
                end: function () {
                    window_index = -1;
                    //清空表单
                    $('#dataForm')[0].reset();
                }
            });
        }

        $('.addBtn').click(function () {
            addOrEdit();
        });

        //表单提交时间
        form.on('submit(submitBtn)', function (data) {
            //当前容器的全部表单字段，名值对形式：{name: value}
            var url = 'permission/add';
            var method = 'post';
            if (data.field.id) {
                //id参数有数据表示当前操作为编辑，否则为新增
                url = 'permission/edit';
                method = 'put';
            }
            $.ajax(url, {
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.code = 200) {
                        layer.close(window_index);
                        layer.msg(res.message);
                        tableReload();
                    }
                }
            });
            //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            return false;
        });

        //表格重载
        function tableReload() {
            table.reload('permissionTable', {
                where: {
                    name: $('#name').val(),
                    type: $('#type').val()
                }
            });
        }

    });
</script>
</body>
</html>